import React, { Component } from 'react';
import { connect } from 'react-redux'
import { Modal, Form, Input,Select ,DatePicker ,Table,Button,TreeSelect,Upload, Icon, Popconfirm,Row,Col,message} from 'antd';
var _this,_props,_state;
import { baseUrl,imgUrl } from '../../../config/system';

const FormItem = Form.Item;
const Option = Select.Option;
const TreeNode = TreeSelect.TreeNode;

class AddShelfModal extends Component {
  constructor(props) {
    super(props);
    this.state = {
      fileList: [],
    }
  }

  okHandler = () => {
     const { onOk } = this.props;
     this.props.form.validateFields((err, values) => {
      if (!err) {
        if(values.detailList.length!=0){        
          onOk(values);
        }else{
          Modal.warning({
            title: '提示',
            content: '未添加资产信息',
          })
        }
      }
     });
  };

  //点击上架弹出上架窗口
  onOpenInstock = (id) => {
     const { onOpenInstock } = this.props;
     onOpenInstock(id);
  };

  render() {
    const { children, dispatch,assetType,assetList,id,detailList,item,roomList,assetBrandList,userList,filePath } = this.props;
    const { getFieldDecorator } = this.props.form;
    const formItemLayout2 = {
      labelCol: { span: 5 },
      wrapperCol: { span: 18 },
    };
    const formItemLayout1 = {
      labelCol: { span: 6 },
      wrapperCol: { span: 18 },
    };
    const formItemLayout3 = {
      labelCol: { span: 9 },
      wrapperCol: { span: 15  },
    };
    const formItemLayout = {
      labelCol: { span: 10 },
      wrapperCol: { span: 14  },
    };
    const onAddDetail = () => {
      this.props.form.validateFields((err, values) => {
        if (!err) {
            dispatch({
              type: 'shelfUp/queryAssetList',
              payload:values,
            })
         }
       });
     }

    //切换机房 重置机柜列表
    const handleRoomChange = (id) => {
      dispatch({
        type: 'shelfUp/qryRackList',
        payload: id,
      })
    };

    const getRoom = data => data.map((item) => {
     return <Option key={item.id_+''}>{item.name}</Option>
    })

    const getUser = data => data.map((item) => {
     return <Option key={item.id_+''}>{item.name}</Option>
    })

    const columns = [{
        title: '资产编号',
        dataIndex: 'assetNo',
        key: 'assetNo',
        fixed: 'left',
        width: 150
      },{
        title: '资产分类',
        dataIndex: 'typeName',
        key: 'typeName',
        width: 120
      },{
        title: '设备名称',
        dataIndex: 'assetName',
        key: 'assetName',
        width: 150
      },{
        title: '品牌',
        dataIndex: 'brandName',
        key: 'brandName',
        width: 100,
      },{
        title: '设备型号',
        dataIndex: 'modelName',
        key: 'modelName',
        width: 150,
      },{
        title: '设备序列号',
        dataIndex: 'serialNo',
        key: 'serialNo',
        width: 120,
      },{
        title: 'RFID编码',
        dataIndex: 'rfidNo',
        key: 'rfidNo',
        width: 100,
      },{
        title: '状态',
        dataIndex: 'status',
        key: 'status',
        width: 60,
        render: (value, row, index) => {
          return (
              value == 1 ? "在库" : value == 2 ? "已上架" : value == 3 ? "已报废" :''
          )
      }
      },{
        title: '所在机房',
        dataIndex: 'roomName',
        key: 'roomName',
        width: 150,
      },{
        title: '所在机柜',
        dataIndex: 'rackName',
        key: 'rackName',
        width: 120,
      },{
        title: '起始U位',
        dataIndex: 'startU',
        key: 'startU',
        width: 70,
      },{
        title: '购置时间',
        dataIndex: 'buyTime',
        key: 'buyTime',
        width: 150,
      },{
        title: '维保结束日期',
        dataIndex: 'expirationTime',
        key: 'expirationTime',
        width: 150,
      }
      // ,{
      //   title: '操作',
      //   key: 'operation',
      //   fixed: 'right',
      //   width: 80,
      //   render: (text, record) => (
      //       <span>
      //         <a onClick={this.onOpenInstock.bind(null, record.id_)}>上架</a>
      //       </span>
      //   ),
      // }
    ];

    const props = {
      name: 'file',
      action: baseUrl + '/upload/uploadShelfUpFile',
      beforeUpload(file) {
        console.log(file.type);
        const isJPG = file.type === 'image/png' || file.type === 'image/jpeg'||file.type === 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'
        ||file.type === 'application/pdf';
        if (!isJPG) {
          message.error('只能上传word、pdf、jpg格式的文件！');
        }
        return isJPG;
      },
      onChange(info) {
        let fileList = info.fileList
        if (info.file.status === 'done') {
        if(info.file.response.httpCode==200){
          message.success(`${info.file.name} 上传成功`);
          dispatch({
            type: 'shelfUp/updateState',
            payload:{filePath:info.file.response.data.fid},
          });
        }else{
          message.error(info.file.response.msg);
        }
          fileList = fileList.filter((file) => {
            return (file.response && file.response.fid);
          })
          //只保留最后一条记录
            fileList = fileList.slice(-1)
        } else if (info.file.status === 'error') {
          message.error(`${info.file.name} 上传失败`);
        }
        let fildsValue = {}
        fildsValue['file'] = fileList.map((file) => {
          return file;
        })

      },
    };

    return (
      <span>
        <Modal
                maskClosable= {this.props.maskClosable}
                confirmLoading= {this.props.confirmLoading}
                title={this.props.title}
                width={1000}
                zIndex={100}
                visible={this.props.visible}
                onOk={this.okHandler}
                onCancel={this.props.onCancel}
                key={this.props.newKey}
        >
         <div style={{backgroundColor:'#fff'}}>
            <div style={{}}>
            <div style={{width:'100%',backgroundColor:'#fff',paddingLeft:'20px'}}>
                <Form layout={'inline'} style={{marginTop: '-16px'}}>
                  <FormItem style={{marginBottom:'0px'}}>
                    {getFieldDecorator('detailList',{initialValue:detailList})(
                      <Input type="hidden"/>
                    )}
                  </FormItem>
                  <FormItem style={{marginBottom:'0px'}}>
                    {getFieldDecorator('filePath',{initialValue:filePath})(
                      <Input type="hidden"/>
                    )}
                  </FormItem>
                    <Row gutter={4}>
                      <Col span={5}>
                        <FormItem
                            label="单号"
                            hasFeedback
                            {...formItemLayout2}
                          >
                          {
                            getFieldDecorator('id_', {
                              initialValue: id,
                            })(<Input  readOnly="readOnly" style={{ width: '160px' }} />)
                          }
                        </FormItem>
                      </Col>
                      <Col span={6}>
                        <FormItem
                              label="机房"
                              hasFeedback
                              {...formItemLayout1}
                            >
                            {getFieldDecorator('roomId', {
                                rules: [{
                                  required: true, whitespace: true, message: '请选择所在机房',
                                }]
                           })(
                              <Select
                                  showSearch
                                  style={{ width: 180 }}
                                  placeholder="选择机房"
                                  optionFilterProp="children"
                              >
                                  {getRoom(roomList)}
                              </Select>
                              )}
                        </FormItem>
                      </Col>
                      <Col span={5}>
                        <FormItem
                              label="操作人"
                              hasFeedback
                              {...formItemLayout3}
                            >
                            {getFieldDecorator('operatorBy', {
                                rules: [{
                                  required: true, whitespace: true, message: '请选择操作人',
                                }]
                           })(
                              <Select
                                  showSearch
                                  style={{ width: 140 }}
                                  placeholder="选择操作人"
                                  optionFilterProp="children"
                              >
                                  {getUser(userList)}
                              </Select>
                              )}
                        </FormItem>
                      </Col>
                      <Col span={8}>
                         <FormItem
                              label="预计执行时间"
                              {...formItemLayout}
                              hasFeedback
                            >
                             {getFieldDecorator('executeTime', {
                                rules: [{
                                  required: true, type: 'object',whitespace: true, message: '请选择预计执行时间',
                                 }]
                               })(
                                <DatePicker format="YYYY-MM-DD HH:mm" style={{ width: 178 }}/>
                              )}
                        </FormItem>
                      </Col>
                    </Row>                    
                    <Row style={{marginTop:'20px'}}>
                      <Col span={24}>
                          <FormItem
                            label="备注"
                             hasFeedback
                           >
                              {
                                getFieldDecorator('remark', {
                                  rules: [{ max: 200, message: '备注信息 200 字符以内' },]
                                })(<Input style={{ width: '890px' }} type="textarea" autosize={{ minRows: 3, maxRows: 3 }}/>)
                              }
                         </FormItem>
                      </Col>
                    </Row>
                    {/* <Row style={{marginTop:'20px'}}>
                      <Col span={24}>
                          <FormItem
                            label="附件"
                             hasFeedback
                           >
                          <Upload {...props}>
                            <Button>
                              <Icon type="upload" /> 上传附件
                            </Button>
                          </Upload>
                         </FormItem>                       
                      </Col>
                    </Row> */}
                   <Row style={{marginTop:'15px'}}>
                     <Col span={24}>
                     <hr style={{width:'926px',height:'0px',borderTop:'1px solid #e9e9e9',borderRight:'0px',borderBottom:'0px',borderLeft:'0px'}} />
                     </Col>
                   </Row>
                   <Row>
                      <Col span={24}>
                        <div style={{width:'100%',marginTop:'15px',marginBottom:'5px',textAlign:'right',paddingRight:'10px'}}>
                           <FormItem>
                              <Button type="primary" size='large' onClick={onAddDetail}>新增明细</Button>
                          </FormItem>
                        </div>
                      </Col>
                    </Row>

                    <div style={{}}>
                        <div style={{width:'100%',padding:"10px 20px 20px 0px",}}>
                              <Table columns={columns}
                                  rowKey={record => record.id_}
                                  dataSource={detailList}
                                  pagination={false}
                                  scroll={{ x: 1800 }}
                            />
                        </div>
                    </div>
                </Form>
            </div>

            </div>
        </div>
        </Modal>

      </span>
    );
  }

}

export default Form.create()(AddShelfModal)
